// ============================================================================
// Input.
// ============================================================================

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint);

    .ibox#{$infix}, .btn#{$infix} {
      border: 1px solid #ccc;
      border-radius: $border-radius;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      text-align: center;
      text-decoration: none;
      padding: .5rem .75rem;
      line-height: 1rem;
      cursor: pointer;
      user-select: none;
      outline: none;

      &.disabled {
        cursor: not-allowed;
      }
    }

    // input box.
    .ibox#{$infix} {
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

      &:focus {
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
      }
    }

    // clickable box.
    .btn#{$infix} {
      &:hover {
        background-color: #e6e6e6;
        text-decoration: none;
      }

      &:active, &.active {
        background-color: #e6e6e6;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
        text-decoration: none;
      }
    }
  }
}
